﻿<%@ Page Title="" Language="C#" MasterPageFile="~/huongnghiep/frontend.Master" AutoEventWireup="true" CodeBehind="detail.aspx.cs" Inherits="VQWEB.huongnghiep.quiz.Detail" %>
<asp:Content ID="Head" ContentPlaceHolderID="Head" runat="server">
    <link href="/js/cluetip/jquery.cluetip.css" rel="stylesheet" />
</asp:Content>
<asp:Content ID="Content" ContentPlaceHolderID="Content" runat="server">    
    <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12 f-content-left">
        <!-- Thanh điều hướng -->
        <ol class="breadcrumb">
            <li><a href="/trang-chu.html">Trang chủ</a></li>
            <li><a href="/bo-trac-nghiem.html">Hướng nghiệp</a></li>
        </ol>
        <!--/ Thanh điều hướng -->
        <!-- Kết quả tìm trắc nghiệm -->
        <div class="row f-row">
            <div class="container ffff">
            <div class="col-md-12 f-color">
                <h4 class="f-tab"><i class="glyphicon glyphicon-check"> </i> Kết quả trắc nghiệm</h4>
            </div>
            </div>
        </div>
        <table class="table table-hover table-bordered">
            <tbody class="text-center">
            <tr>
                <td>A</td>
                <td>B</td>
                <td>C</td>
                <td>D</td>
                <td>E</td>
                <td>F</td>
                <td>G</td>
                <td>H</td>
            </tr>
            <tr>
                <td id="tdA">0</td>
                <td id="tdB">0</td>
                <td id="tdC">0</td>
                <td id="tdD">0</td>
                <td id="tdE">0</td>
                <td id="tdF">0</td>
                <td id="tdG">0</td>
                <td id="tdH">0</td>
            </tr>
            </tbody>
        </table>
        <p>Căn cứ vào các câu trả lời của bạn, thì bạn đã trả lời nhiều nhất theo thứ tự là:</p>
        <dl class="dl-horizontal">
            <!-- Description goes here -->
        </dl> 
        <p id="pExp"><!-- Explanation goes here --></p>
        <div class="row f-row f3 group">
            <div class="container ffff">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 f-color group">
                <h4 class="f-tab"><i class="glyphicon glyphicon-check"> </i> Chuyên nghành các trường đào tạo</h4>
            </div>
            </div>
        </div>
        <div class="row group" id="plChuyenNganh">
            <!-- Chuyen nganh phu` hop goes here -->
        </div>
        <!-- End kết quả trắc nghiệm -->
    </div><!--/ Page content left -->      
</asp:Content>
<asp:Content ID="Script" ContentPlaceHolderID="Script" runat="server">
    <script src="/js/jquery.jqote2.js" type="text/javascript"></script>
    <script src="/js/common.js" type="text/javascript"></script>
    <script src="/js/cluetip/jquery.cluetip.min.js" type="text/javascript"></script>
    <!-- Put this into a custom JavaScript file to make things more organized -->
    <script>
        $(document).ready(function () {
            var url_ashx = "/quiz/handler";

            var points = initParams();

            var tplDes = '<dt>{0} câu trả lời {1}</dt><dd>{2} <a class="title" href="#" title="Típ {3}|{4}" style="cursor: help;">( {5} )</a></dd>';
            var tplEx = 'Và hệ thống gợi ý bạn thuộc Típ người <span class="info-color">“{0}”</span> (viết tắt của: {1}) : {2} . Tương ứng với Típ người <span class="info-color">“{3}”</span>, hệ thống hướng cho bạn chọn những ngành nghề sau:';

            $('.dl-horizontal').append($(String.format(tplDes, points[0].value, points[0].name.toUpperCase(), points[0].des, points[0].type, points[0].ex, points[0].type)))
                .append($(String.format(tplDes, points[1].value, points[1].name.toUpperCase(), points[1].des, points[1].type, points[1].ex, points[1].type)))
                .append($(String.format(tplDes, points[2].value, points[2].name.toUpperCase(), points[2].des, points[2].type, points[2].ex, points[2].type)))
                .append($(String.format(tplDes, points[3].value, points[3].name.toUpperCase(), points[3].des, points[3].type, points[3].ex, points[3].type)));

            $('a.title').cluetip({ splitTitle: '|', arrows: true, escapeTitle: false, cursor: 'help', activation: 'hover', closePosition: 'title', closeText: '<img src="/js/cluetip/images/cross.png" alt="close" />', sticky: true });
            
            var personType = points[0].initial.concat(points[1].initial).concat(points[2].initial).concat(points[3].initial);
            var personTypeFull = points[0].type.concat(', ').concat(points[1].type).concat(', ').concat(points[2].type).concat(', ').concat(points[3].type);

            $(document).attr("title", 'Típ người: ' + personType.toString());

            $.post(url_ashx, { type: personType }, function (data) {
                var jsonData = $.parseJSON(data);
                $('#pExp').append(String.format(tplEx, personType, personTypeFull, jsonData.quiz_noidung, personType));
                $.get('/huongnghiep/templates/quiz/chuyennganh.tpl', function (tmpl) {
                    $("#plChuyenNganh").jqoteapp(tmpl, jsonData.chuyennganh);
                });
            });
        });

        //init parameters
        function initParams() {
            var totalA = gup('a');var totalB = gup('b');var totalC = gup('c');var totalD = gup('d');var totalE = gup('e');var totalF = gup('f');var totalG = gup('g');var totalH = gup('h');
            $('#tdA').html(totalA);$('#tdB').html(totalB);$('#tdC').html(totalC);$('#tdD').html(totalD);$('#tdE').html(totalE);$('#tdF').html(totalF);$('#tdG').html(totalG);$('#tdH').html(totalH);

            var arrObjs = [
                { name: 'a', value: totalA, initial: 'E', type: '<b>E</b>xtrovert', des: 'Bạn thuộc típ người hướng ngoại', ex: 'Bạn rất năng động và là người của xã hội, bạn quan tâm đến mọi việc xảy ra xung quanh mình.' },
                { name: 'b', value: totalB, initial: 'I', type: '<b>I</b>ntrovert', des: 'Bạn thuộc típ người hướng nội', ex: 'Bạn rất kín đáo và cẩn thận. Bạn giao tiếp không nhiều lắm nhưng nội dung giao tiếp thật sâu sắc.' },
                { name: 'c', value: totalC, initial: 'S', type: '<b>S</b>ensor', des: 'Bạn là người nhạy bén, sắc sảo', ex: 'Bạn thường chú ý đến tất cả sự việc và tiểu tiết xung quanh.' },
                { name: 'd', value: totalD, initial: 'I', type: '<b>I</b>ntuitive', des: 'Bạn là người có trực giác mạnh', ex: 'Bạn quan tâm đến mối quan hệ giữa các sự việc. Bạn là người giàu tưởng tượng và sáng tạo.' },
                { name: 'e', value: totalE, initial: 'T', type: '<b>T</b>hinker', des: 'Bạn là người thiên về lý trí', ex: 'Bạn quyết định mọi việc rất khách quan và không dựa theo quan điểm cá nhân.' },
                { name: 'f', value: totalF, initial: 'F', type: '<b>F</b>eeler', des: 'Bạn là người thiên về cảm tính', ex: 'Bạn thường dựa trên các tiêu chuẩn cá nhân và cảm giác của mình để quyết định mọi việc.' },
                { name: 'g', value: totalG, initial: 'J', type: '<b>J</b>udger', des: 'Bạn thuộc típ người quy củ và quyết đoán', ex: 'Bạn thích một môi trường làm việc có tổ chức và ngăn nắp.' },
                { name: 'h', value: totalH, initial: 'P', type: '<b>P</b>erceiver', des: ':Bạn là người thích quan sát', ex: 'Bạn rất linh hoạt, ham hiểu biết và có một chút tinh thần “nổi loạn”.' }
            ];
            arrObjs.sort(function (a, b) { return b.value - a.value; });

            return arrObjs;
        }
    </script>
</asp:Content>